<template>
  <div class="home">
    <el-backtop :right='20' :bottom='400'>
      <!-- 加个标签 -->
      回到顶部
    </el-backtop>

    <el-carousel :interval="3000" class='Carousel'>
      <el-carousel-item v-for="(val,ind) in src" :key="ind">
        <el-image @click="MvPlay(val)" :src="val.picUrl" fit='cover'
          class='pic'></el-image>
      </el-carousel-item>
    </el-carousel>

    <VideoCommon ref="mvPlay" :maskFlag='maskFlag' :mvUrl='mvUrl'
      @maskFlagFn='maskFlag = false' :MVval='MVval'>
    </VideoCommon>
    <!-- mv播放页面 -->
    <div style='width:90%;margin:20px auto'>
      <el-row>
        <el-col :span="11" style="height:500px">
          <!-- 推荐歌单 -->
          <div class="BIGrecomMusicList">
            <div
              style="width:100%;height:50px;display:flex;justify-content:space-between;">
              <span style="font-size:30px;margin-left:0">推荐歌单</span>
              <span v-if="wantToDo" class="more" @click="moreMusic">更多<i
                  class="el-icon-arrow-right"></i></span>
            </div>
            <div style="width:50%">
              <el-card style="height:100%; " v-for="(val,ind) in recomList[0]"
                :key="ind">
                <div @click="MusicListPlay(val)"
                  style="position:relative;width:100%;height:100%;overflow:hidden;">
                  <el-image ref="pic3" class="pic2" fit='none'
                    v-if="val.picUrl !==undefined" :src="val.picUrl"></el-image>
                  <span
                    style="padding-right: 7px;background:rgba(75, 84, 91, 0.3);color:white;position:absolute;right:5px;bottom:10px;backdrop-filter:saturate(180%) blur(6px);border-radius:15px">
                    <i class="el-icon-caret-right"
                      style="font-size:18px;margin-right:-8px"></i>
                    {{(val.playCount/10000).toFixed(1)}}万
                  </span>
                  <div class="mask">
                    <i style=" transform: translateY(-80%);"
                      class="el-icon-video-play"></i>
                  </div>
                </div>

                <div style="font-size:25px">{{val.name}}
                </div>
              </el-card>
            </div>
            <div style="width:50%;display:flex;flex-wrap: wrap;">
              <el-card style="width:50%;cursor: pointer;"
                v-for="(val,ind) in recomList[1]" :key="ind">
                <div @click="MusicListPlay(val)"
                  style="position:relative;width:100%;height:100%;overflow:hidden;">
                  <el-image ref="pic3" class="pic2" fit='cover'
                    v-if="val.picUrl !==undefined" :src="val.picUrl"></el-image>
                  <span
                    style="padding-right: 7px;background:rgba(75, 84, 91, 0.3);color:white;position:absolute;right:5px;bottom:10px;backdrop-filter:saturate(180%) blur(6px);border-radius:15px">
                    <i class="el-icon-caret-right"
                      style="font-size:18px;margin-right:-8px"></i>
                    {{(val.playCount/10000).toFixed(1)}}万
                  </span>
                  <div class="mask">
                    <i style="transform: translateY(-80%);"
                      class="el-icon-video-play"></i>
                  </div>
                </div>
                <div>{{val.name}}
                </div>
              </el-card>
            </div>
          </div>
        </el-col>

        <el-col :span="12" :push="1" style="height:500px;overflow:hidden">
          <!-- 最新MV -->
          <div class="mvBig">
            <div
              style="width:100%;height:50px;display:flex;justify-content:space-between;">
              <span style="font-size:30px;margin-left:0">最新MV</span>
              <span v-if="wantToDo" class="more" @click="MVmore">更多<i
                  class="el-icon-arrow-right"></i></span>
            </div>

            <div style="display:flex;flex-wrap:wrap;width:100%;height:50%"
              v-for="(val,ind) in newMVList[0]" :key="ind">

              <div style='width:100%;height:90%;position:relative'
                @click="MvPlay(val)">
                <div class="mask2">
                  <i style=" transform: translateY(100%);"
                    class="el-icon-video-play"></i>
                </div>
                <img v-if="newMVList[0]!==undefined" :src="val.cover"
                  style='width:100%;height:100%;object-fit:cover;border-radius:15px'>
                </img>
              </div>

              <div>{{val.name}} -- {{val.artistName}}</div>
            </div>

            <div
              style=" display:flex;flex-direction:row; flex-wrap:wrap;width:100%;height:50%;">
              <div
                style="display:flex;flex-direction: column;width:50%;height:100%"
                v-for="(val,ind) in newMVList[1]" :key="ind">

                <div style="width:100%;height:80%;position:relative"
                  @click="MvPlay(val)">
                  <img :src="val.cover"
                    style='width:100%;height:100%;object-fit:cover;border-radius:15px' />
                  <div class="mask">
                    <i style=" transform: translateY(-200%);"
                      class="el-icon-video-play"></i>
                  </div>
                </div>

                <div>{{val.name}} -- {{val.artistName}}</div>
              </div>
            </div>

          </div>
        </el-col>
      </el-row>
    </div>
    <MusicCommon v-if="newMusicList.length!==0" musicTitle='推荐音乐'
      :newMusicList='newMusicList'>
    </MusicCommon>
    <!-- 音乐页面 要传入音乐列表 -->

  </div>
</template>

<script>
import { recommendMV, newMusic, recommendMusicList, newMV } from '../../api/Home'
import { MvPlay } from '../../api/Play'
import MusicCommon from '../../components/MusicComponent.vue'
import VideoCommon from '../../components/VideoComponent.vue'
import { listChange } from '../../utils/tools'
export default {
  name: '',
  data () {
    return {
      src: [],
      // 轮播图列表
      mvUrl: '',
      // mv地址
      MVval: '',
      maskFlag: false,
      // mv是否显示 
      newMusicList: [],
      recomList: [],
      // 推荐歌单
      newMVList: [],
      // 最新mv列表
      wantToDo: false
      // 两个更多按钮的显示
    };
  },
  async created () {
    let res = await recommendMV()
    // 获取推荐mv
    this.src = res.data.result
    // 把推荐的mv列表放入src列表
    let res2 = await newMusic()
    this.newMusicList = listChange(res2.data.result)
    let res3 = await recommendMusicList({ limit: 5 })
    // 获取推荐歌单
    // console.log('歌单详情',res3.data.result);
    this.recomList.push(res3.data.result.slice(0, 1))
    this.recomList.push(res3.data.result.slice(1))
    let res4 = await newMV({ limit: 3 })
    this.newMVList.push(res4.data.data.slice(0, 1))
    this.newMVList.push(res4.data.data.slice(1))
    // 首页最新mv信息
  },
  methods: {
    async MvPlay (val) {
      // 播放视频
      let res = await MvPlay({ id: val.id })
      // 获取播放地址
      this.MVval = val
      this.mvUrl = res.data.data.url
      this.maskFlag = true
      this.$refs.mvPlay.mvPlay()
      // 利用ref获取子组件的实例,然后触发子组件里的函数
    },
    MVmore () {
      // 更多mv
      console.log('更多mv');
    },
    moreMusic () {
      console.log('更多音乐');
    },
    async MusicListPlay (val) {
      // 点击歌单
      this.$router.push({ name: 'musicList', query: { val: JSON.stringify(val) } })
    },
  },
  updated () {

  },
  components: { MusicCommon, VideoCommon },

  props: {},

  watch: {},

  computed: {},

}

</script>
<style scoped>
.over_ellipsis {
  /* 超出省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home {
  height: 100%;
  text-align: center;
}
.pic {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.Carousel {
  line-height: 0 !important;
}
/* 轮播图 */

.el-backtop {
  /* 美化一下回到顶部按钮 */
  z-index: 3;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.5);
  background-color: black;
  width: 50px;
  height: 200px;
  border-radius: 10px;
}

.Mask {
  z-index: 3;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.MvBox {
  position: absolute;
  top: 125px;
  left: 240px;
  width: 1080px;
  height: 500px;
}
.Preload {
  color: white;
  font-size: 40px;
  position: absolute;
  top: 200px;
  left: 410px;
}
.Video {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.BIGrecomMusicList {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  /* 换行 */
  /* border: 1px solid #000; */
}
.pic2 {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  vertical-align: middle;
}

.more {
  font-size: 20px;
  line-height: 50px;
  color: #ccc;
  cursor: pointer;
}
.more:hover {
  color: black;
}
.mask {
  cursor: pointer;
  border-radius: 15px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  font-size: 60px;
  color: white;
  text-align: center;
  padding-top: 50%;
}
.mask:hover {
  border-radius: 15px;
  transition: all 0.2s ease;
  opacity: 1;
}
.mask2 {
  cursor: pointer;
  border-radius: 15px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: white;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  font-size: 60px;
  border: 1px solid #000;
}
.mask2:hover {
  border-radius: 15px;
  transition: all 0.2s ease;
  opacity: 1;
}
.mvClass {
  display: flex;
  width: 100%;
  height: 50%;
  border: 1px solid red;
}
.mvBig {
  height: 100%;
  /* border: 1px solid #000; */
  display: flex;
  flex-direction: column;
}
</style>